<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="css/base.css" rel="stylesheet">
    <link href="css/head.css" rel="stylesheet">

    <link href="css/mine.css" rel="stylesheet">
</head>
<body>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/Utils.js"></script>

    <script src="js/head.js"></script>

    <script src="js/mock.js"></script>
    <script src="mock/mine.js"></script>

    <div class="head"></div>
    <div class="nav_head"></div>

    <div class="main">
        <div class="userInfo">
            <div class="avatar">
                <input type="file" class="upload">
                <div class="shade">
                    <b>更换头像</b>
                </div>
            </div>
    
            <h3 id="username"></h3>
        </div>

        <div class="infoBox">
            <h2>个人信息</h2>

            <div class="form">
                <span>手机号</span>
                <input id="phone" type="text" disabled>
            </div>

            <div class="form">
                <span>联系地址</span>
                <input id="phone" type="text" disabled>
            </div>

            <div class="button change_info">确认修改</div>

        </div>

        <div class="update">
            <h2>修改密码</h2>

            <div class="form">
                <span>旧密码</span>
                <input id="oldPassword" type="password" >
            </div>

            <div class="form">
                <span>新密码</span>
                <input id="newPassworld" type="password" >
            </div>

            <div class="form">
                <span>确认密码</span>
                <input id="confirmPassword" type="password" >
            </div>

            <div class="button change_pwd">确认修改</div>
        </div>
    </div>

    <script>

        let user = hasLogin()
        if(!user){
            alert("请先登录")
            location.href = 'login.html'
        }

        $('document').ready(function(){


            render(user)
            initEvent()
        })
        
        function checkPwd(){
            let oldPwd = $('#oldPassword').val()
            let newPwd = $('#newPassworld').val()
            let confirmPwd = $('#confirmPassword').val()
            
            if(oldPwd.length == "" || newPwd.length == "" || confirmPwd.length == ""){
                alert("请填写完整的信息")
                return false
            }

            else if(newPwd != confirmPwd){
                alert("填写的密码不一致")
                return false
            }

            return true
        }

        function changePwdEvent(){
            $('.change_pwd').click(function(){

                if(!checkPwd())
                    return

                let oldPwd = $('#oldPassword').val()
                let newPwd = $('#newPassworld').val()
                let confirmPwd = $('#confirmPassword').val()
                let username = user.username

                let data = {
                    oldPwd,
                    newPwd,
                    username
                }

                $.ajax({
                    data,
                    url: 'http://localhost/change_pwd.php',
                    type: 'POST',
                    success: function(res){
                        if(typeof(res) == 'string')
                            res = JSON.parse(res)

                        if(res.code == 200){
                            alert(res.msg)
                        }
                        else{
                            alert(res.msg)
                        }
                    }
                })
            })
        }

        function upload(data){
            return $.ajax({
                        data,
                        contentType: false,
                        processData: false,
                        url : baseUrl + 'upload.php',
                        type : 'POST',
                        success: function(res){

                        }
                    })
        }

        function changeAvatar(imgUrl){
            let username = user.username

            let data = {
                username,
                image:imgUrl
            }

            data = JSON.stringify(data)
            return $.ajax({
                data,
                url : baseUrl + 'change_avatar.php',
                type: 'POST',
                success: function(res){

                }
            })
        }

        function changeAvatarEvent(){
            $('.upload').change(function(event){
                let file = event.target.files[0]
                
                let type = file.type
                let imgRule = /image/
                
                let result = imgRule.test(type)

                let data = new FormData()

                data.append('file', file)

                if(result){
                    let imgUrl
                    upload(data)
                    .then(res => {
                        if(typeof(res) == 'string')
                            res = JSON.parse(res)
                            imgUrl = res.data.imgUrl
                        return changeAvatar(res.data.imgUrl)
                    })
                    .then(res => {
                        if(typeof(res) == 'string')
                            res = JSON.parse(res)
                            
                        if(res.code == 200){
                            alert(res.msg)

                            $('.avatar img').attr('src', baseUrl + imgUrl)
                            
                            let user = getSession('user')
                            user.avatar = imgUrl
                            setSession('user', user)
                        }else{
                            alert(res.msg)
                        }
                    })

                }else{
                    alert("请上传图片")
                }
                
            })
        }

        function changeInfo(){
            $('.change_info').click(function(){
                alert("改变信息")
            })
        }

        function initEvent(){
            changePwdEvent()
            changeInfo()
            changeAvatarEvent()
        }

        function render(user){
            $('.avatar').append(`
                <img src="${baseUrl + user.avatar}" >
            `)
            
            $('#username').text(user.username)

            $('#phone').val(user.phone)
        }
    </script>    
</body>
</html>